<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 通过总线的方式实现组件之间的通信 -->
    <div id="app">
        <test></test>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 定义一个全局子组件
        Vue.component("test",{
            // 在每个 new Vue 实例的子组件中，其根实例可以通过 $root property 进行访问
            template:`
                <!-- test子组件zzz -->
                <h1>test子组件{{this.$root.msg}}</h1>
            `
        })

        let vm=new Vue({
            el:"#app",
            data:{
                msg:"zzz"
            }
        })







    </script>
</body>
</html>